<template>
  <!-- sku弹窗组件 -->
  <vk-data-goods-sku-popup 
    :modelValue="isShowSku"
    :mask-close-able="false"
    :localdata="goodsSkuList"
    :mode="mode"
    :activedStyle="{
      color: '#27BA9B',
      borderColor: '#27BA9B',
      backgroundColor: '#E9F8F5'
    }"
    ref="goodsSkuPoup"
    @add-cart="onAddCart"
    @buy-now ="onBuyNow"
    @close="isShowSku = false"
  />

  <div class="goods-container">
    <!-- 导航栏 -->
    <TmallNavBar>
      <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
      <template #default>商品详情</template>
      <template #right>
        <i class="icon iconfont icon-shouye1" @click="$router.push({path: '/'})"></i>
      </template>
    </TmallNavBar>


    <!-- 骨架屏 -->
    <van-skeleton v-if="isShowSkeleton">
      <template #template>
          <div class="goods-detail-skeleton">
              <div class="gds-image-box">
                  <van-skeleton-image  class="s-image"/>
              </div>
              <div class="gds-name-box">
                <van-skeleton-paragraph class="gds-name" row-width="70%"/>
                <van-skeleton-paragraph class="gds-name" row-width="25%"/>
              </div>

              <van-skeleton-paragraph style="margin-top: 10px;height: 20px;"/>
              <van-skeleton-paragraph v-for="(item) in 10" :key="item" style="margin-top: 10px;height: 30px;"/>
          </div>
      </template>
    </van-skeleton>


    <!-- 基本信息 -->
    <div class="goods" v-if="goodsInfo.name">
      <!-- 商品主图 -->
      <div class="preview">
        <van-swipe
          :height="375"
          indicator-color="#27BA9B"
          @change="onGoodsAlbumChange"
        >
          <van-swipe-item v-for="(item, index) in goodsAlbumList" :key="index">
            <van-image class="image"  :src="global.MINIO_FILE_DOMAIN + item.image_url" @click="preview(index)"/>
          </van-swipe-item>
        </van-swipe>
        <div class="indicator">
          <span class="current">{{ currentIndex }}</span>
          <span class="split">/</span>
          <span class="total">{{ goodsAlbumList.length }}</span>
        </div>
      </div>

      <!-- 商品简介 -->
      <div class="meta">
        <div class="price">
          <span class="symbol">¥</span>
          <span class="number">{{ (goodsInfo.price/100).toFixed(2) }}</span>
          <span class="market_price">¥ {{ (goodsInfo.market_price/100).toFixed(2) }}</span>
        </div>


        <div class="name_box">
          <div class="name ellipsis">{{ goodsInfo.name }}</div>
          <div class="favi_box" @click="handleCollect">
            <van-icon name="star-o" size="32" color="gray" v-if="!isCollect" />
            <van-icon name="star" size="32" color="#FF9402" v-else />
            <span class="favi_text">收藏</span>
          </div>
        </div>
        <div class="desc"> {{ goodsInfo.intro }} </div>
      </div>

      <!-- 操作面板 -->
      <div class="action">
        <div @click="selectGoodsSku(1)" class="item arrow">
          <span class="label">选择</span>
          <span class="text ellipsis"> {{selectedGoodsSkuOptText}} </span>
        </div>
        <div @click="openService('address')" class="item arrow">
          <span class="label">送至</span>
          <span class="text ellipsis" v-if="userStore.deliveryAddr?.id"> {{ userStore.deliveryAddr.region }} {{ userStore.deliveryAddr.address }} </span>
          <span class="text ellipsis" v-else> 请选择收获地址 </span>
        </div>
        <div @click="openService('service')" class="item arrow">
          <span class="label">服务</span>
          <span class="text ellipsis"> 无忧退 快速退款 免费包邮 </span>
        </div>
      </div>
    </div>

    <!-- 商品评价 -->
    <div class="evaluate">
      <!-- 评价标题 -->
      <div class="evaluate-title-wrapper">
        <span class="evaluate-title">宝贝评价({{ goodsEvaluateTotal }})</span>
        <span class="evaluate-more" @click="$router.push('/goodsEvaluate?goods_id='+goodsInfo.id)">查看全部 <van-icon name="arrow" /></span>
      </div>

      <!-- 评价内容 -->
      <div class="evaluate-content-wrapper">
        <div class="evaluate-item" v-for="(item, index) in goodsEvaluateList" :key="index">
            <div class="evaluate-user">
              <div class="evaluate-user-avatar">
                <van-image round width="35" :src="global.MINIO_FILE_DOMAIN + item.avatar_url"></van-image>
              </div>
              <div class="evaluate-username-wrapper">
                <div class="evaluate-username">{{ item.username ? item.username : '匿名买家'}}</div>
                <div class="evaluate-time">{{ item.create_time }}</div>
              </div>
            </div>
            <div class="evaluate-content">
              {{ item.contents }}
            </div>
        </div>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="detail panel" v-if="goodsInfo.name">
      <div class="title">
        <span>宝贝详情</span>
      </div>
      <div class="content">
        <!-- 属性详情 -->
        <div class="properties">
          <div v-for="(item, index) in goodsAttributeList" :key="index">
            <div class="item" v-if="index < maxShowGoodsAttributeNum">
                <span class="label">{{ item.name }}</span>
                <span class="value">{{ item.value }}</span>
            </div>
          </div>
          <div class="item" v-if="goodsAttributeList.length > maxShowGoodsAttributeNum">
                <span class="more" @click="openService('attr')">查看更多</span>
            </div>
        </div>
        
        <!-- 图片详情 -->
        <van-image v-for="(item, index) in goodsAlbumList" :key="index" mode="widthFix" :src="global.MINIO_FILE_DOMAIN + item.image_url" />
      </div>
    </div>

    <!-- 同类推荐 -->
    <div class="similar panel">
      <div class="title">
        <span>同类推荐</span>
      </div>
      <div class="content">
        <div class="goods-item"
          v-for="item in similarRecommendGoodsList"
          :key="item.goods_id"
          @click="$router.push('/goodsDetail?goods_id='+item.goods_id)"
        >
          <div class="image-box">
            <img class="image" v-img-lazy="global.MINIO_FILE_DOMAIN + item.cover_url" />
          </div>
          <div class="name ellipsis">{{ item.goods_name }}</div>
          <div class="price">
            <span class="symbol">¥</span>
            <span class="number">{{ (item.price/100).toFixed(2) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 用户操作 -->
  <div class="toolbar" v-if="goodsInfo.name">
    <div class="icons">
      <div class="icons-button" @click="handleGoodsFollow">
        <span class="iconfont" :class="isFollow ? 'follow-checked icon-guanzhu' : 'icon-guanzhu1-copy'" />
        {{followText}}
      </div>

      <div class="icons-button" open-type="contact">
        <span class="iconfont icon-kefu2"></span>
        <span>客服</span>
      </div>

      <!-- 购物车 -->
      <van-badge
        :content="cartStore.validTotal"
        :offset="[-4,4]" 
      >
        <div class="icons-button" @click="$router.push('/cart?referer=goodsDetail')">
          <span class="iconfont icon-gouwuche"></span>
          <span>购物车</span>
        </div>
      </van-badge>
    </div>
    <div class="buttons">
      <span @click="selectGoodsSku(2)" class="addcart"> 加入购物车 </span>
      <span @click="selectGoodsSku(3)" class="buynow"> 立即购买 </span>
    </div>
  </div>

  <!-- 弹层 -->
  <van-popup
    ref="popup"
    v-model:show="isShowPopup"
    type="bottom"
    background-color="#fff"
    :mask-click="false"
  >
    <AddressPanel v-if="popupName === 'address'" @close="isShowPopup = false" />
    <ServicePanel v-if="popupName === 'service'" @close="isShowPopup = false" />
    <GoodsAttrPanel :goodsAttributes="goodsAttributeList" v-if="popupName === 'attr'" @close="isShowPopup = false" />
  </van-popup>
</template>

<script setup>
import { reqGetGoodsDetailAPI, reqGetGoodsListAPI } from '@/apis/goods'
import { reqAddUserGoodsCollectAPI, reqCancelUserGoodsCollectAPI, reqUserGoodsCollectListAPI } from '@/apis/goodsCollect'
import { reqAddUserGoodsFollowAPI, reqCancelUserGoodsFollowAPI, reqUserGoodsFollowListAPI } from '@/apis/goodsFollow'
import { reqGoodsCommentListAPI } from '@/apis/goodsComment'
import { reqAddUserFootprintAPI } from '@/apis/footprint'

import { ref, inject, computed, onMounted, watch, onUpdated, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showSuccessToast, showImagePreview } from 'vant'

import vkDataGoodsSkuPopup from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue'
import ServicePanel from '@/views/GoodsDetail/components/ServicePanel.vue'
import GoodsAttrPanel from '@/views/GoodsDetail/components/GoodsAttrPanel.vue'
import AddressPanel from '@/views/GoodsDetail/components/AddressPanel.vue'

import { useCartStore } from '@/store/modules/cart'
import { useOrderStore } from '@/store/modules/order'
import { useUserStore } from '@/store/modules/user'


// ----------- 定义全局变量开始 -----------
// 全局属性
const global = inject('global')

// 购物车存储
const cartStore = useCartStore()

// 订单存储
const orderStore = useOrderStore()

// 用户存储
const userStore = useUserStore()

// 路由
const route = useRoute()

// 路由器
const router = useRouter()

// 是否显示骨架屏
const isShowSkeleton = ref(false)
// ----------- 定义全局变量结束 -----------



// ----------- 组件挂载完成开始 -----------
onMounted( async () => {
  // 显示骨架屏
  isShowSkeleton.value = true
  await getGoodsDetail(route.query.goods_id)
  // 这里为啥获取商品详情的时候需要添加async、await
  // 因为获取同类推荐商品，需要商品分类ID，所有需要等待商品详情请求完成
  await Promise.all([
    getSimilarRecommendGoods(),
    getUserGoodsCollectList(),
    // 用户已关注商品数量
    getUserGoodsFollowTotal(),
    // 商品评价
    getGoodsEvaluateList(),

    // 添加足迹
    reqAddUserFootprintAPI(route.query.goods_id)
  ])

  // 隐藏骨架屏
  isShowSkeleton.value = false
})
// ----------- 组件挂载完成结束 -----------


// ---------- 监控商品ID功能开始 ----------
watch(() => route.query.goods_id, async (oldId, newId) => {
  // 显示骨架屏
  isShowSkeleton.value = true
  await getGoodsDetail(oldId)
  // 这里为啥获取商品详情的时候需要添加async、await
  // 因为获取同类推荐商品，需要商品分类ID，所有需要等待商品详情请求完成
  await Promise.all([
    getSimilarRecommendGoods(),
    getUserGoodsCollectList(),
    // 用户已关注商品数量
    getUserGoodsFollowTotal(),
    // 商品评价
    getGoodsEvaluateList(),

    // 添加足迹
    reqAddUserFootprintAPI(route.query.goods_id)
  ])

  // 隐藏骨架屏
  isShowSkeleton.value = false
})
// ---------- 监控商品ID功能结束 ----------



// ---------- 获取商品信息功能开始 ----------
// 商品信息
const goodsInfo = ref({})

// 商品属性
const goodsAttributeList = ref([])

// 最短显示商品属性数量
const maxShowGoodsAttributeNum = ref(5)

const getGoodsDetail = async (id) => {
  const result = await reqGetGoodsDetailAPI(id)

  // 商品信息
  goodsInfo.value = result.data.goods

  // 商品相册
  goodsAlbumList.value = result.data.goods_albums != null ? result.data.goods_albums : []
  
  // 商品属性
  goodsAttributeList.value = result.data.goods_attributes != null ? result.data.goods_attributes : []
  
  // 商品SKU
  let goodsSkus = result.data.goods_skus != null ? result.data.goods_skus.filter((item) => item.inventory_num > 0 && item.status == 1) : []

  // 商品选项
  let goodsOptions = result.data.goods_options != null ? result.data.goods_options.reverse() : []
  
  // 组装商品SKU列表
  goodsSkuList.value = {
    _id: result.data.goods.id,
    name: result.data.goods.name,
    goods_thumb: global.MINIO_FILE_DOMAIN + result.data.goods.cover_url,
    // sku_name_arr的数据顺序一定要和spec_list的数据顺序一致，坑坑坑的一逼
    // sku_name_arr ['荔枝纹杏色5.5cm', '38'] 与 spec_list {name: '颜色分类', list: Array(1)}{name: '尺码', list: Array(1)}
    sku_list: goodsSkus.map((item) => {
      // 如果商品SKU没有图片则使用商品封面图片
      let imgUrl =  item.img_url ? item.img_url : result.data.goods.cover_url
      return {
        _id: item.id,
        goods_id: item.goods_id,
        goods_name: result.data.goods.name,
        image: global.MINIO_FILE_DOMAIN + imgUrl,
        price: item.price,
        sku_name_arr: item.spec_option_value_items,
        stock: item.inventory_num,
      }
    }),
    spec_list: goodsOptions.map((item) => {
      let valueList = []
      let values = item.value.split(',')
      values.forEach((v) => {
        valueList.push({name: v})
      });
      return {
        name: item.name,
        list: valueList
      }
    }),
  }
}
// ---------- 获取商品信息功能结束 ----------



// ------------ 商品相册功能开始 ------------
// 商品相册
const goodsAlbumList = ref([])

// 商品相册下标
const currentIndex = ref(1)

// 滑动相册
const onGoodsAlbumChange = (e) => {
  currentIndex.value = e + 1
}

const isShowPreview = ref(false)
// 预览轮播图
const preview = (index) => {
  isShowPreview.value = true
	showImagePreview({
		startPosition:index,
		images: goodsAlbumList.value.map((value) => global.MINIO_FILE_DOMAIN + value.image_url)
	})
}
// ------------ 商品相册功能结束 ------------



// ------------ 收藏商品功能开始 ------------
// 获取用户收藏商品信息，用于判断该商品是否被用户收藏过
const isCollect = ref(false)
const collectId = ref(0)
const getUserGoodsCollectList = async () => {
  const result = await reqUserGoodsCollectListAPI({goods_id: goodsInfo.value.id, page_size: -1})
  isCollect.value = result.data.total > 0 ? true : false
  collectId.value = result.data.total > 0 ? result.data.user_goods_collects[0].id : 0
}

// 延时器
const timer = ref(null)

const handleCollect = async () => {
    // ------------------ 防抖处理 ------------------
	// 清除延时器
	clearTimeout(timer.value)
	// 重新启动延时器
	timer.value = setTimeout( async () => {
		if (isCollect.value) {
            await reqCancelUserGoodsCollectAPI(collectId.value)
            showSuccessToast('取消成功')
            isCollect.value = false
        } else {
            const result = await reqAddUserGoodsCollectAPI(goodsInfo.value.id)
            collectId.value = result.data.id
            showSuccessToast('收藏成功')
            isCollect.value = true
        }
	}, 300)
}
// ------------ 收藏商品功能结束 ------------



// ------------ 商品SKU功能开始 ------------
// 是否显示SKU弹窗
const isShowSku = ref(false)

// 商品SKU列表
const goodsSkuList = ref({})

const mode = ref(1)

const goodsSkuPoup = ref()

// 选择商品SKU
const selectGoodsSku = (m) => {
  mode.value = m
  isShowSku.value = true
}

// 选中的商品SKU规格文本
const selectedGoodsSkuOptText = computed(() => {
  return goodsSkuPoup.value?.selectArr?.join(' ').trim() || "请选择商品规格"
})
// ------------ 商品SKU功能结束 ------------



// ----------- 加入购物车功能开始 -----------
const onAddCart = async (e) => {
  await cartStore.addCart({
    goods_id: goodsInfo.value.id,
    goods_sku_id: e._id,
    num: e.buy_num,
    inventory_num: e.stock,
    new_price: e.price,
    goods: {
      name: goodsInfo.value.name,
      cover_url: e.image,
      price: e.price,
    },
    goods_sepc_option_text: e.sku_name_arr.join(' '),
    is_checked: 1,
    is_effective: 1, // 是否有效
  })

  // 关闭SKU弹窗
  isShowSku.value = false
  

  showSuccessToast('添加成功')
}
// ----------- 加入购物车功能结束 -----------



// ------------ 直接购买功能开始 ------------
const onBuyNow = (e) => {
  // 组装生成订单参数
  const createOrderParams = {
    goods_id: goodsInfo.value.id,
    cover_url: e.image,
    name: goodsInfo.value.name,
    goods_sku_id: e._id,
    goods_sepc_option_text: e.sku_name_arr.join(' '),
    price: e.price,
    inventory_num: e.stock,
    num: e.buy_num,
  }
	
  orderStore.setCreateOrderParams(createOrderParams)
  router.push({path: '/confirmOrder', query: {mode: 1}})
}
// ------------ 直接购买功能结束 ------------



// -------- 获取同类推荐商品功能开始 --------
const similarRecommendGoodsList = ref([])
const getSimilarRecommendGoods = async () => {
  const result = await reqGetGoodsListAPI({cid: goodsInfo.value.cid, page_size: 8})
  similarRecommendGoodsList.value = result.data.goods != null ? result.data.goods : []
}
// -------- 获取同类推荐商品功能结束 --------



// -------------- 服务功能开始 --------------
const popup = ref()
const isShowPopup = ref(false)
// 弹出层条件渲染
const popupName = ref()
const openService = (name) => {
  // 修改弹出层名称
  popupName.value = name
  isShowPopup.value = true
}
// -------------- 服务功能结束 --------------



// -------------- 关注功能开始 --------------
const isFollow = ref(false)
const followText = ref('关注')
const goodsFollowId = ref(0)

// 获取关注商品数量
const getUserGoodsFollowTotal = async () => {
  const result = await reqUserGoodsFollowListAPI({goods_id: goodsInfo.value.id})
  if (result.data.total > 0) {
    isFollow.value = true
    followText.value = '已关注'
    goodsFollowId.value = result.data.user_goods_follows[0].id
  }
}

// 延时器
const followTimer = ref(null)

// 处理商品关注
const handleGoodsFollow = async () => {
    // ------------------ 防抖处理 ------------------
	// 清除延时器
	clearTimeout(followTimer.value)
	// 重新启动延时器
	followTimer.value = setTimeout( async () => {
        if (isFollow.value) { // 取消关注
            await reqCancelUserGoodsFollowAPI(goodsFollowId.value)
            showSuccessToast('取消成功')
            isFollow.value = false
            followText.value = '关注'
        } else {
            const result = await reqAddUserGoodsFollowAPI(goodsInfo.value.id)
            showSuccessToast('关注成功')

            followText.value = '已关注'
            isFollow.value = true
            goodsFollowId.value = result.data.id
        }
    }, 300)
}

// -------------- 关注功能结束 --------------



// -------------- 评价功能开始 --------------
// 商品评价列表
const goodsEvaluateList = ref([])

// 商品评价总数
const goodsEvaluateTotal = ref(0)

const getGoodsEvaluateList = async () => {
  const result = await reqGoodsCommentListAPI({goods_id: goodsInfo.value.id, page_size: 2})
  goodsEvaluateList.value = result.data.goods_comments != null ? result.data.goods_comments : []
  goodsEvaluateTotal.value = result.data.total
}
// -------------- 评价功能结束 --------------
</script>

<style lang="scss" scoped>
::v-deep .van-skeleton {
  display: block;
}
.goods-detail-skeleton {
  display: flex;
  flex-direction: column;
  .gds-image-box {
    height: 375px;
    margin-bottom: 5px;
    .s-image {
      width: 100%;
      height: 100%;
    }
  }
  .gds-name-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .gds-name {
      height: 40px;
    }
  }
}

.goods-container {
  background-color: ghostwhite;
  margin-top: 45px;
  margin-bottom: 50px;
}

.panel {
  margin-top: 10px;
  background-color: #fff;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    line-height: 1;
    padding: 15px 30px 15px 3px;
    position: relative;
    span {
      padding-left: 5px;
      font-size: 14px;
      color: #333;
      font-weight: 600;
      border-left: 2px solid #27ba9b;
    }
  }
}

.arrow {
  &::after {
    position: absolute;
    top: 50%;
    right: 15px;
    content: '\e607';
    color: #ccc;
    font-family: 'iconfont' !important;
    font-size: 16px;
    transform: translateY(-50%);
  }
}

/* 商品信息 */
.goods {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #fff;
  .preview {
    height: 375px;
    position: relative;
    .image {
      height: 100%;
      width: 100%;
    }
    .indicator {
      height: 20px;
      padding: 0 12px;
      line-height: 20px;
      border-radius: 15px;
      color: #fff;
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgba(0, 0, 0, 0.3);
      position: absolute;
      bottom: 15px;
      right: 15px;
      .current {
        font-size: 13px;
      }
      .split {
        font-size: 12px;
        margin: 0 1px 0 1px;
      }
      .total {
        font-size: 12px;
      }
    }
  }
  .meta {
    position: relative;
    border-bottom: 1px solid #eaeaea;
    .price {
      height: 65px;
      padding: 13px 15px 0;
      color: #fff;
      font-size: 17px;
      box-sizing: border-box;
      background-color: #35c8a9;
      .market_price {
        color: gray;
        text-decoration: line-through;
        margin-left: 5px;
      }
    }
    .name_box {
      display: flex;
      align-items: center;
      .name {
        font-size: 17px;
        color: #333;
        width: 85%;
        padding-right: 5px;
        border-right: 2px solid gray;
        
      }
      .favi_box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .favi_text {
          font-size: 12px;
        }
      }
    }
    .number {
      font-size: 28px;
    }
    .brand {
      width: 80px;
      height: 40px;
      overflow: hidden;
      position: absolute;
      top: 13px;
      right: 15px;
    }
    .name {
      max-height: 44px;
      line-height: 1.4;
      margin: 10px;
      font-size: 16px;
      color: #333;
    }
    .desc {
      line-height: 1;
      padding: 0 10px 15px;
      font-size: 12px;
      color: #27ba9b;
    }
  }
  .action {
    padding-left: 10px;
    .item {
      height: 45px;
      padding-right: 30px;
      border-bottom: 1px solid #eaeaea;
      font-size: 13px;
      color: #333;
      position: relative;
      display: flex;
      align-items: center;
      &:last-child {
        border-bottom: 0 none;
      }
    }
    .label {
      width: 30px;
      color: #898b94;
      margin: 0 8px 0 5px;
    }
    .text {
      flex: 1;
      -webkit-line-clamp: 1;
    }
  }
}

// 商品评价
.evaluate {
  margin-top: 10px;
  padding: 0px 10px;
  background-color: #fff;
  // 评价头部
  .evaluate-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .evaluate-title {
      padding-left: 5px;
      font-size: 14px;
      color: #333;
      font-weight: 600;
      border-left: 4px solid #27ba9b;
      line-height: 1;
      padding: 15px 30px 15px 3px;
    }
    .evaluate-more {
      font-size: 12px;
      padding-right: 10px;
      color: #27ba9b;
    }
  }

  // 评价内容
  .evaluate-content-wrapper {
    display: flex;
    flex-direction: column;
    // 评价明细
    .evaluate-item {
      margin-top: 15px;
      // 评价用户
      .evaluate-user {
        display: flex;
        align-items: center;

        .evaluate-username-wrapper {
          margin-left: 10px;

          .evaluate-username {
            font-size: 14px;
            font-weight: bold;
          }
          .evaluate-time{
            margin-top: 5px;
            font-size: 13px;
            color: #ccc;
          }
        }
      }

      // 评价内容
      .evaluate-content {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 500;
        font-family:"Microsoft YaHei",Arial,Helvetica,sans-serif;
        line-height: 20px;
        // font-family: tahoma,arial,sans-serif;
      }
    }
  }
}

/* 商品详情 */
.detail {
  padding-left: 10px;
  .content {
    margin-left: -10px;
    image {
      width: 100%;
    }
  }
  .properties {
    padding: 0 10px;
    margin-bottom: 30rpx;
    .item {
      display: flex;
      flex-direction: row;
      line-height: 2;
      padding: 5px;
      font-size: 13px;
      color: #333;
      border-bottom: 1px dashed #ccc;
    }
    .label {
      width: 70px;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .value {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .more {
      margin-left: 140px;
      color: #27ba9b;
    }
  }
}



/* 同类推荐 */
.similar {
  .title {
    margin-left: 10px;
  }
  .content {
    padding: 0 10px 10px;
    background-color: #f4f4f4;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .goods-item {
      width: 49%;
      padding: 12px 10px 10px;
      margin: 10px 0px;
      border-radius: 5px;
      background-color: #fff;
      .image-box {
        text-align: center;
        .image {
          width: 150px;
          height: 150px;
        }
      }
      .name {
        height: 30px;
        margin: 5px 0;
        font-size: 13px;
        color: #262626;
      }
      .price {
        line-height: 1;
        font-size: 10px;
        color: #cf4444;
      }
      .number {
        font-size: 13px;
        margin-left: 1px;
      }
    }
  }
  div {
    &:nth-child(even) {
      margin-right: 0;
    }
  }
}

/* 底部工具栏 */
.toolbar {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: #fff;
  height: 50px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: content-box;
  .buttons {
    display: flex;
    & > span {
      width: 110px;
      text-align: center;
      line-height: 36px;
      font-size: 13px;
      color: #fff;
      border-radius: 36px;
    }
    .addcart {
      background-color: #FF9402;
    }
    .buynow {
      background-color: #FE560A;
      margin-left: 10px;
    }
  }
  .icons {
    padding-right: 5px;
    display: flex;
    align-items: center;
    flex: 1;
    .icons-button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      line-height: 1.4;
      padding: 0;
      font-size: 10px;
      color: #333;
      background-color: #fff;
      &::after {
        border: none;
      }
      .follow-checked {
        color: #FE560A;
      }
    }
    text {
      display: block;
      font-size: 17px;
    }
  }
}

// ::v-deep .van-badge {
//   z-index: 98;
// }
</style>